/*
 * @Author: yanjikun
 * @Date: 2022-05-05 16:21:28
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-13 16:20:03
 * @Description: file content
 */

import { menuList } from '@/api/system/menu'
import { FormConfig } from '@/components/Form/src/types/form'
import IconFont from '@/components/IconFont'
import { TableColumn } from '@/components/Table/src/types/column'
import { constantRouterComponents } from '@/router/constantRouterComponents'
import { Badge } from 'ant-design-vue'
export const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 2 },
]

export const typeOptions = [
  { label: '菜单', value: 1 },
  { label: '按钮', value: 2 },
]

/**表格筛选配置项 */
export const searchMenuConfig: FormConfig<API.MenuTableParams>[] = [
  {
    field: 'name',
    component: 'Input',
    label: '菜单名称',
    componentProps: {
      placeholder: '请填写菜单名称',
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: 'status',
    component: 'Select',
    label: '状态',
    componentProps: {
      options: statusOptions,
      placeholder: '请选择状态',
    },
    colProps: {
      span: 8,
    },
  },
]

/**表格配置项 */
export const menuTableColumn: TableColumn<API.IMenuItem>[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon',
    bodyCell: ({ text }) => {
      return text ? <IconFont type={text}></IconFont> : ''
    },
  },
  {
    title: '权限标识',
    dataIndex: 'permission',
    key: 'permission',
  },
  {
    title: '路由地址',
    dataIndex: 'url',
    key: 'url',
  },
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    bodyCell: ({ record }) => {
      const status = record.status === 1
      return (
        <Badge
          status={status ? 'success' : 'error'}
          text={statusOptions.find((item) => item.value === record.status)?.label}
        ></Badge>
      )
    },
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    bodyCell: ({ record }) => {
      return <>{typeOptions.find((item) => item.value === record.type)?.label}</>
    },
  },
]

/**菜单表单配置项 */
export const menuFormConfig: FormConfig<API.IMenuItem>[] = [
  {
    field: 'type',
    label: '菜单类型',
    component: 'RadioGroup',
    componentProps: ({ formInstance }) => ({
      buttonStyle: 'solid',
      optionType: 'button',
      options: typeOptions,
      onChange: async () => {
        await formInstance.setFieldsValue({ url: undefined })
      },
    }),
    colProps: {
      span: 24,
    },
    defaultValue: 1,
    dynamicDisabled: ({ values }) => {
      return !!values.id
    },
  },
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input',
    componentProps: {
      placeholder: '请填写菜单名称',
    },
    required: true,
    message: '请填写菜单名称',
    colProps: {
      span: 12,
    },
  },
  {
    label: '上级菜单',
    field: 'parentId',
    component: 'ApiTreeSelect',
    componentProps: {
      api: menuList,
      fieldNames: { children: 'children', label: 'name', key: 'id', value: 'id' },
      placeholder: '请选择上级菜单',
      showSearch: true,
      treeNodeFilterProp: 'name',
      treeDefaultExpandAll: true,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '排序',
    field: 'sort',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请填写排序号',
      controls: false,
    },
    required: true,
    message: '请填写排序号',
    colProps: {
      span: 12,
    },
  },
  {
    field: 'url',
    label: '权限路径',
    component: 'Input',
    componentProps: {
      placeholder: '请填写权限路径',
    },
    required: false,
    message: '请填写权限路径',
    colProps: {
      span: 12,
    },
    hidden: ({ formModel }) => formModel.type !== 2,
  },
  {
    label: '图标',
    field: 'icon',
    component: 'IconsSelect',
    componentProps: {
      placeholder: '点击选择图标',
    },
    colProps: {
      span: 12,
    },
    hidden: ({ formModel }) => formModel.type !== 1,
  },
  {
    label: '路由地址',
    field: 'url',
    component: 'Select',
    componentProps: {
      placeholder: '请填写路由地址',
      options: Object.keys(constantRouterComponents).map((key) => ({ label: key, value: key })),
    },
    required: true,
    message: '请填写路由地址',
    colProps: {
      span: 12,
    },
    hidden: ({ formModel }) => formModel.type !== 1,
  },
  {
    label: '权限标识',
    field: 'permission',
    component: 'Input',
    componentProps: {
      placeholder: '请填写权限标识',
    },
    colProps: {
      span: 12,
    },
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      optionType: 'button',
      options: statusOptions,
    },
    colProps: {
      span: 12,
    },
    defaultValue: 1,
  },
  {
    field: 'hidden',
    label: '是否显示',
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      optionType: 'button',
      options: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 2,
        },
      ],
    },
    colProps: {
      span: 12,
    },
    defaultValue: 1,
    hidden: ({ formModel }) => formModel.type !== 1,
  },
  {
    field: 'keepAlive',
    label: '是否缓存',
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      optionType: 'button',
      options: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 2,
        },
      ],
    },
    colProps: {
      span: 12,
    },
    defaultValue: 2,
    hidden: ({ formModel }) => formModel.type !== 1,
  },
]
